<template>
	<view>
		<custom-nav v-bind="navConfig" />
		<view class="setting">
			<u-cell-group :border="false" :customStyle="{'background-color': '#ffffff', 'border-radius': '10px'}">
				<u-cell title="开启通知" isLink :titleStyle="{'font-size': '16px', color: '#222222', padding: '5px 0'}"
					:border="false">
					<u-switch slot="right-icon" v-model="settingForm.is_disable" inactive-color="#DEDEDE"
						active-color="#0da25f" :active-value="0" :inactive-value="1" @change="editSetting" size="22"></u-switch>
				</u-cell>
			</u-cell-group>
			<view>
				<view>
					<view class="title">
						<image style="width: 16px;height: 16px;vertical-align: bottom;margin-right: 12px;"
							:src="settingForm.is_disable?'https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/33.png':'https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/11.png'">
						</image>
						推送范围
					</view>
					<view style="padding: 0 30rpx;background: #FFFFFF;border-radius: 20rpx;">
						<u-radio-group :disabled="settingForm.is_disable ? true : false" v-model="settingForm.push_type"
							placement="column" @change="editSetting" iconPlacement="right" activeColor="#0da25f"
							inactiveColor="#999999" size="22">
							<u-radio :customStyle="{marginBottom: '0',lineHeight: '52px', height: '52px'}"
								labelColor="#000000" label="仅焦点比赛" :name="0" @change="radioChange"></u-radio>
							<u-radio :customStyle="{marginBottom: '0',lineHeight: '52px', height: '52px'}"
								labelColor="#000000" label="仅关注的比赛" :name="1" @change="radioChange"></u-radio>
							<u-radio :customStyle="{marginBottom: '0',lineHeight: '52px', height: '52px'}"
								labelColor="#000000" label="焦点比赛和关注的比赛" :name="2" @change="radioChange"></u-radio>
						</u-radio-group>
					</view>
				</view>
				<view>
					<view class="title">
						<image style="width: 16px;height: 16px;vertical-align: bottom;margin-right: 12px;"
							:src="settingForm.is_disable?'https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/33.png':'https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/11.png'">
						</image>
						推送时间
					</view>
					<view style="padding: 0 30rpx;background: #FFFFFF;border-radius: 20rpx;">
						<u-radio-group :disabled="settingForm.is_disable ? true : false" v-model="settingForm.push_time"
							placement="column" @change="editSetting" iconPlacement="right" activeColor="#0da25f"
							inactiveColor="#999999" size="22">
							<u-radio :customStyle="{marginBottom: '0',lineHeight: '52px', height: '52px'}"
								labelColor="#000000" label="开赛前6小时" :name="0" @change="radioChange"></u-radio>
							<u-radio :customStyle="{marginBottom: '0',lineHeight: '52px', height: '52px'}"
								labelColor="#000000" label="开赛前12小时" :name="1" @change="radioChange"></u-radio>
						</u-radio-group>
					</view>
				</view>
				<view v-if="!settingForm.is_disable">
					<view class="title">
						<image style="width: 16px;height: 16px;vertical-align: bottom;margin-right: 12px;"
							:src="settingForm.is_disable?'https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/33.png':'https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/11.png'">
						</image>
						通知开通教程
					</view>
					<view style="background-color: #fff;padding: 18px 10px;">
						<view class="Grid--flexCells" :style="`padding-bottom: 15px;`">
							<view class="Grid-cell Grid--center text">
								<text>1</text>
								扫描绑定二维码
							</view>
						</view>
						<view class="Grid--flexCells" :style="`padding-bottom: 15px;`">
							<view class="Grid-cell Grid--center text">
								<text>2</text>
								关注"猎豹FB"公众号
							</view>
						</view>
						<view class="Grid--flexCells" :style="`padding-bottom: 15px;`">
							<view class="Grid-cell Grid--center text">
								<text>3</text>
								提示"绑定成功"即可实时接收通知
							</view>
						</view>
						<view class="relative" style="margin-top: 38rpx; width: 630rpx; height: 646rpx; background: url('https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/15.png') no-repeat; background-position: center; background-size: 100%;">
							<!-- <uqrcode v-if="qrcodeData.value" ref="uqrcode" canvas-id="qrcode" :value="qrcodeData.value" :options="{
									margin: 5,
									foregroundColor: qrcodeData['foreground-color'],
									backgroundColor: qrcodeData['background-color'],
									areaColor: qrcodeData['background-color'],
									positionProbeForegroundColor: qrcodeData['outer-color'],
									foregroundImageSrc: qrcodeData.logo,
									backgroundImage: qrcodeData['background-image'],
									positionAdjustBackgroundColor: qrcodeData['background-color']
								}" :size="qrcodeData.width" style="position: absolute; top: 50%; left: 50%; margin-left: -99px; margin-top: -104px;">
								<template v-slot:loading>
										<text style="color: @999999;"></text>
									</template>
							</uqrcode> -->
							<u--image
								v-if="qrcodeData.value"
							    :showLoading="true"
							    :src="qrcodeData.value"
							    width="200px"
							    height="200px"
								style="position: absolute; top: 50%; left: 50%; margin-left: -99px; margin-top: -104px;"
							  ></u--image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		settingNotice
	} from '@/service/index.js'
	import navConfig from './config/navConfig.js'

	export default {
		data() {
			return {
				navConfig,
				checked: 1,
				radiovalue1: '1',
				settingForm: {
					platform: 20,
					application: 22,
					is_disable: 0,
					push_type: 0,
					push_time: 0,
				},
				qrcodeData: {
					value: '', // 二维码内容
					template: 'default', // 样式模板,可选：'default','water','diamond','hexagon','star','rect','bar','heart','glitter','stroke','fusion',
					level: '', // 纠错等级,可选：'M','L','Q','H'
					width: 200, // 二维码宽度，默认：300,
					height: 200, // 二维码高度，默认：300
					'background-color': '#ffffff', // 背景色，默认：#ffffff
					'foreground-color': '#000000', // 前景色，默认：#000000;（多色用逗号分隔）
					'inner-color': '#000000', // 定位点内层颜色，默认：#000000
					'outer-color': '#000000', // 定位点外层颜色，默认：#000000
					'background-image': '', // 背景图片地址
					'foreground-image': '', // 前景图片地址
					logo: '', // logo图片地址
					text: '', // 悬浮文本内容
					'text-color': '', // 悬浮文本颜色
					'text-stroke': '' // 悬浮文本描边
				},
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo
			}),
		},
		onLoad(options) {
			let setting_notice = this.userInfo.setting_notice
			this.settingForm = {
				platform: setting_notice.platform,
				application: setting_notice.application,
				is_disable: setting_notice.is_disable,
				push_type: setting_notice.push_type,
				push_time: setting_notice.push_time
			}
			this.qrcodeData.value = `${process.env.NODE_ENV === 'development' ? 'https://www.liebaofb.com' : window.location.origin}/${this.userInfo.wechat_info && this.userInfo.wechat_info.qrcode_url}`
		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			async editSetting() {
				console.log(this.settingForm)
				let res = await settingNotice(this.settingForm)
				console.log(res)
				await this.$store.dispatch('login/userinfoAction');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setting {
		padding: 10px 20px 0;
		background-color: #FBFBFB;
		height: 100vh;

		.title {
			font-weight: bold;
			font-size: 16px;
			color: #000000;
			line-height: 19px;
			padding: 16px 0;
		}

		.text {
			font-weight: 400;
			font-size: 14px;
			color: #000000;
			line-height: 16px;

			text {
				width: 13px;
				height: 13px;
				display: inline-block;
				text-align: center;
				line-height: 13px;
				font-size: 10px;
				color: #FFFFFF;
				border-radius: 100%;
				background-color: #0DA25F;
				margin: 0 6px;
			}
		}
	}
</style>